<script setup>
import { onMounted, ref, computed } from "vue";

const props = defineProps({ xdState: String });

const xd = ref(props.xdState);
onMounted(() => {
  xd.value = "xdclass.net";
});

// 该 prop 变更时计算属性也会自动更新
const newXd = computed(() => props.xdState + "老王");
</script>

<template>
  <h2>子组件</h2>
  <span>{{ xd }}</span>
  <span>{{ newXd }}</span>
</template>
